<template>
    <el-form-item label="" :key="rush" :prop="`adgroup.audience.${dataForm.audience_index}.interest_category_ids`">
        <div class="tk_coll_box" :class="{'open':is_show}">
            <div class="tk_coll_head flexbox flexcenter" @click="is_show = !is_show">
                <i class="el-icon-circle-plus-outline"></i>
                <div class="tk_coll_head_conter flex">
                    <div class="tch_title">添加兴趣</div>
                    <div class="tch_text" v-if="dataForm.adgroup.audience[dataForm.audience_index].interest_category_ids.length>0">已选择{{dataForm.adgroup.audience[dataForm.audience_index].interest_category_ids.length}}项大众兴趣</div>
                    <div class="tch_text" v-else>基于其大众兴趣或购买意向的目标用户。</div>
                </div>
                <i class="el-icon-delete" @click.stop="deleteAll" v-if="dataForm.adgroup.audience[dataForm.audience_index].interest_category_ids.length>0"></i>
            </div>
            <div class="tk_coll_content" v-show="is_show">
                <el-form-item label="定义他们对哪种类型的内容感兴趣" style="margin-bottom:18px">
                    <div class="tk_tag_box" v-if="dataForm.adgroup.audience[dataForm.audience_index].interest_category_ids.length>0">
                        <el-tag type="info" v-for="(tag,index) in dataForm.adgroup.audience[dataForm.audience_index].interest_category_ids" :key="tag.interest_category_id" closable size="mini" @close="deleteTag(tag,index)">
                            {{tag.interest_category_name}}
                        </el-tag>
                    </div>
                    <el-popover placement="right" width="222" trigger="click">
                        <el-input size="small" slot="reference" placeholder="请输入兴趣名称" clearable suffix-icon="el-icon-search" v-model="filterText">
                        </el-input>
                        <el-tree :default-checked-keys="defaultCheck" :filter-node-method="filterNode" :props="props" node-key="interest_category_id" ref="tree" :data="treeData" show-checkbox @check-change="handleCheckChange">
                        </el-tree>
                    </el-popover>
                </el-form-item>
            </div>
        </div>
    </el-form-item>
</template>

<script>
export default {
    props: ["dataForm"],
    components: {},
    name: "",
    watch: {
      filterText(val) {
        this.$refs.tree.filter(val);
      },
      indexRush(val){
        this.rush++
      }
    },
    data() {
        return {
            is_show:false,
            props: {
                label:"interest_category_name",
                children:"sub_category"
            },
            treeData: [],
            filterText: "",
            rush:0
        };
    },
    created() {
        this.getInterest();
    },
    computed:{
        defaultCheck(){
            return this.dataForm.adgroup.audience[this.dataForm.audience_index].interest_category_ids.map(item=>{return item.interest_category_id})
        },
        indexRush(){
            return this.dataForm.audience_index
        }
    },
    methods: {
        //获取兴趣
        async getInterest() {
            const { data: res } = await this.$http.post(
                this.$tiktokUrl + "launch/TiktokInfo/interestList",
                {
                    placements: ["PLACEMENT_TIKTOK"],
                    advertiser_id: this.dataForm.base[0].advertiser_id,
                }
            );
            if (res.code !== 200) {
                this.$message.error(res.msg);
                return;
            } else {
                this.treeData = res.data
            }
        },

        getSimpleCheckedNodes(store) {
            const checkedNodes = [];
            const traverse = function (node) {
                const childNodes = node.root
                    ? node.root.childNodes
                    : node.childNodes;
                childNodes.forEach((child) => {
                    if (child.checked) {
                        checkedNodes.push(child.data);
                    }
                    if (child.indeterminate) {
                        traverse(child);
                    }
                });
            };
            traverse(store);
            return checkedNodes;
        },

        handleCheckChange() {
            this.dataForm.adgroup.audience[this.dataForm.audience_index].interest_category_ids = this.$refs.tree.getCheckedNodes(true)
            // this.dataForm.adgroup.audience[this.dataForm.audience_index].interest_category_ids = this.getSimpleCheckedNodes(this.$refs.tree.store);
            this.sessionSave()
        },

        deleteTag(item, index) {
            this.dataForm.adgroup.audience[this.dataForm.audience_index].interest_category_ids.splice(index, 1);
            this.$refs.tree.setCheckedNodes(this.dataForm.adgroup.audience[this.dataForm.audience_index].interest_category_ids);
            this.sessionSave()
        },

        deleteAll(){
            this.dataForm.adgroup.audience[this.dataForm.audience_index].interest_category_ids = []
            this.$refs.tree.setCheckedNodes(this.dataForm.adgroup.audience[this.dataForm.audience_index].interest_category_ids);
            this.sessionSave()
        },

        filterNode(value, data) {
            if (!value) return true;
            return data.interest_category_name.indexOf(value) !== -1;
        },

        sessionSave() {
            this.$emit("sessionSave");
        },
    },
};
</script>


<style scoped>
.el-tree{
    height: 300px;
    overflow-y: auto;
}
.tk_coll_box {
    box-sizing: border-box;
    border: 1px solid transparent;
    border-radius: 4px;
    transition: 0.4s;
    width: 400px;
    overflow: hidden;
    margin-bottom: 12px;
}
.tk_coll_box:hover,.tk_coll_box.open{
    border: 1px solid #4475ff;
}
.tk_coll_head {
    height: 65px;
    background: rgba(165, 177, 209, 0.1);
    padding: 0 20px;
    cursor: pointer;
}
.tk_coll_head .el-icon-circle-plus-outline,
.tk_coll_head .el-icon-delete {
    flex-shrink: 0;
    font-size: 18px;
    color: #616c85;
}
.tk_coll_head_conter {
    margin: 0 12px;
}
.tch_title {
    font-size: 14px;
    color: #17233d;
    line-height: 20px;
}
.tch_text {
    font-size: 12px;
    color: #b4b7bd;
    margin-top: 4px;
}
.tk_coll_content {
    padding: 20px 20px 0 20px;
}
.tk_tag_box{
    margin-bottom: 12px;
}
.el-form-item .tk_coll_content .el-form-item{
    margin-bottom: 18px !important;
}
/deep/ .tk_coll_content .el-form-item__label{
    color: #616c85 !important;
}
</style>

